<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-select v-model="searchState" placeholder="全部状态">
        <el-option v-for="(item,typekey) in searchList.status_arr" :key="typekey" :label="item" :value="typekey"></el-option>
      </el-select>
      <el-select v-model="searchName" placeholder="账号">
        <el-option v-for="(item,typekey) in searchList.list" :key="typekey" :label="item.username" :value="item.username"></el-option>
      </el-select>
      <!-- <el-input size="small" v-model="title" placeholder="商品名称"></el-input> -->
      <!-- <el-input size="small" v-model="searchMap.status" placeholder="分类名称"></el-input>-->
      <el-button size="small" type="primary" @click="handleSearch">搜索</el-button> 
      <el-button size="small" type="primary" @click="handleAdd()"><i class="el-icon-plus"></i><span>添加管理员</span></el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id" width="100"></el-table-column>

      <el-table-column label="真实姓名" prop="real_name"></el-table-column>
      <el-table-column label="账号" prop="username"></el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <p v-if="scope.row.status==1">启用</p>
          <p v-else>禁用</p>
        </template>
      </el-table-column>
      <el-table-column label="所属权限组" prop="name" width="120"></el-table-column>
      <el-table-column label="最后一次登陆时间" prop="last_login"></el-table-column>
      <el-table-column label="最后一次登陆ip" prop="last_ip"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
          <el-button v-if="scope.row.status!=1" @click="handleDisable(1,scope.row)" size="mini" type="primary">启用</el-button>
          <el-button v-else @click="handleDisable(0,scope.row)" size="mini" type="danger">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <EditDialog :key="timer" :isEdit="isEdit" :isStatus="isStatus" :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  </div>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";

import EditDialog from "./EditDialog.vue";
import adminApi from "@/api/admin";

@Component({
  components: {EditDialog }
})
export default class businessTypeList extends Vue {
  // @Getter("user") getUser: any;
  searchList: any = {};//搜索数据
  searchState: string = '';//状态
  searchName: string = '';//搜索账号
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() timer: any = '';
  @Provide() status: number = 0;//禁用状态
  @Provide() isStatus: boolean = false;
  @Provide() formData: any = {
    id:"",
    username:"",
    real_name:"",
    password: "",
    type:"",
    phone:"",
    status:"",
    group_id:"",
  };
  @Provide() searchMap: any = {
    status:"",
    username:''
  };
  headClass() {
            return "text-align: center;background:#eef1f6;";
        }
 // 新增
  handleAdd(){
    this.isAdd=true;
    this.isEdit=true;
    this.formData={id:"",username: "",password:"",type:"0",parent_id:"",phone:"",status:"",group_id:"", real_name: ''}
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.isEdit=true;
    if(row.status==1){
      this.isStatus=true
    }else{
      this.isStatus=false
    }
    this.timer = new Date().getTime();
    this.formData.username=row.username
    this.formData.real_name=row.real_name
    this.formData.phone=row.phone
    this.formData.id=row.id
    this.formData.type=row.type
    this.formData.group_id = row.group_id;
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
    this.loadData();
  }
  // 禁用启用
  handleDisable(i,row:any){
    if(i==1){
      this.status=1
    }else{
      this.status=0
    }
    adminApi.disabledAdmin(row.id,this.status)
    .then((res: any) => {
      if(res.data.status){
        this.$message({
          message: '操作成功',
          type: "success"
        });
        this.loadData()
      }else{
        this.$message({
          message: res.data.msg,
          type: "error"
        });
      }
    });
  }

  created() {
    this.loadData();
  }

  loadData() {
    adminApi.adminList(this.page,this.size,this.searchMap)
      .then((res: any) => {
        console.log(res)
        this.searchList = res.data.data
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
      });
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.searchMap.status = this.searchState
    this.searchMap.username = this.searchName
    this.loadData();
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.el-table .cell {
  text-align: center;
}
</style>
